<template>
  <div>
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick"> -->
      <!-- <el-tab-pane label="全部事件" name="1"></el-tab-pane> -->
      <!-- <el-tab-pane label="我的任务" name="2"></el-tab-pane> -->
      <!-- <el-tab-pane label="我的提交" name="3"></el-tab-pane> -->
        <el-row :gutter="20" class="mb20">
          <el-col :span="3">
            <SelectGroup v-model="req.dept" @change="getList"></SelectGroup>
          </el-col>
          <el-col :span="3">
            <SelectEventSourceType v-model="req.sourceType" @change="getList"></SelectEventSourceType>
          </el-col>
          <el-col :span="5">
            <SelectDateRange :start.sync="req.startTime" :end.sync="req.endTime" @change="getList"></SelectDateRange>
          </el-col>
          <el-col :span="5">
            <el-input v-model="req._content_" placeholder="请输入内容" @change="getList"></el-input>
          </el-col>
          <el-col :span="5">
            <el-input v-model="req.creatorName" placeholder="请输入提交人" @change="getList"></el-input>
          </el-col>
          <el-col :span="3">
            <SelectEventLevel v-model="req.level" @change="onChangeEventLevel"></SelectEventLevel>
          </el-col>
          <el-col :span="3" style="margin-top:10px;">
            <el-select style="width: 100%" v-model="req.isTransfer" placeholder="状态" clearable @change="getList">
              <el-option label="待处理" :value="10"></el-option>
              <el-option label="已完成" :value="20"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3" style="margin-top:10px;">
            <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
            <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
            <template slot-scope="{$index}">
              {{ $index + 1 + (req.page - 1) * req.pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="instanceBizCode" label="工单号" min-width="140" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="categoryName" label="分类" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="content" label="内容" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="address" label="地址" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="gmtHandle" label="处置时间" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="gmtTimeLimit" label="最后期限的时间" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="handleType" label="处理类型" min-width="120" align="left" show-overflow-tooltip>
            <template slot-scope="{ row }">
                {{row.handleType == 1 ? '上报指派' : '直接处置'}}
            </template>
          </el-table-column>
          <el-table-column prop="instanceCreatorName" label="提交人" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="handlerName" label="处置人" min-width="120" align="left" show-overflow-tooltip>
            <template slot-scope="{row}">
                <div>姓名：{{row.handlerName||'--'}}</div>
                <div v-if="row.handlerDeptName">部门：{{row.handlerDeptName}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="handlerDeptName" label="处置人部门" min-width="120" align="left" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="sourceName" label="来源" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="typeName" label="问题类型" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="subTypeName" label="详细类型" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column prop="status" label="状态" width="140" align="center">
            <template slot-scope="{ row }">
              <span>{{ formatRecordType(row.status) }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
                <!-- v-if="row.instanceCurrentNode =='handle'" -->
                <el-button v-if="row.instanceCurrentNode =='handle'" type="text" @click="turn(row)">转派</el-button>
                <el-button type="text" @click="detail(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>
      
      <!-- <el-tab-pane label="我的任务" name="2">
        <el-table :data="tableData1" border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
            <template slot-scope="{$index}">
              {{ $index + 1 + (req.page - 1) * req.pageSize }}
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="申请人" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="deptName" label="所在部门" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="gmtCreate" label="申请时间" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="申请流程" min-width="120" align="left" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="140" align="center">
            <template slot-scope="{ row }">
              <span>{{ formatRecordType(row.status) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="{ row }">

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane> -->
    <!-- </el-tabs> -->


    <Edit :show.sync="showEdit" :item="currentItem" @change="search"></Edit>

    <Detail :show.sync="showDetail" :item="currentItem" :id="currentItem.id"></Detail>

    <!-- 转派 -->
    <TurnEvent :show.sync="showTurnEvent" :item="currentItem" @confirm="search"></TurnEvent>
  </div>
</template>
<script>
import Edit from './components/edit'
import Detail from './components/detail'
import TurnEvent from './components/turnEvent.vue'
import { getList, getMyList, getMyTasks } from "@/api/workEvent";

export default {
  components: { Edit, Detail, TurnEvent },
  data() {
    return {
      activeName: "1",
      tableData: [],
      total: 0,
      req: {
        page: 1,
        pageSize: 20,
      },
      showEdit: false,
      currentItem: {},
      showDetail: false,
      showTurnEvent: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    search() {
        this.req.page = 1;
        if(this.activeName == '1') {
            this.getList();
        }else if(this.activeName == '2') {
            this.getTask();
        }else {
            this.getMyList();
        }
    },
    getList() {
      getList(this.req).then((res) => {
        this.tableData = res.data || [];
        this.total = res.total;
      });
    },
    getTask() {
      getMyTasks(this.req).then((res) => {
        this.tableData = res.data || [];
        this.total = res.total;
      });
    },
    getMyList() {
        getMyList(this.req).then((res) => {
            this.tableData = res.data || [];
            this.total = res.total;
        });
    },
    // 提交表单
    onSubmit(form) {
      subForm(form).then((res) => {
        if (res.code === 1) {
          this.getList();
          this.showForm = false;
        }
      });
    },
    handleClick() {
      this.search()
    },
    // 转派
    turn(row) {
        this.showTurnEvent = true;
        this.currentItem = structuredClone(row)
    },

    // 添加
    add() {
        this.currentItem = {}
      this.showEdit = true;
    },
    // 删除
    del(row) {
      this.$modal.confirm("确定删除此条数据吗？").then((res) => {});
    },
    // 查看
    detail(row) {
      this.currentItem = JSON.parse(JSON.stringify(row));
      this.showDetail = true;
    },
    getRowClassName({ row, rowIndex }) {
      return `row-bg-color-${row.overdueStatus}`;
    },
    down() {},
    onChangeEventLevel(e) {
        console.log(e)
        this.req.category = e[0]||null;
        this.req.type = e[1]||null;
        this.req.subType = e[2]||null;
        this.search()
    }
  },
};
</script>
